<template>
  <img class="headerImg" src="../images/banner.jpg"/>
  <div class="header">
    <!--    <div class="header_title">产品唯一标识码</div>-->
    <!--    <div class="header_content">-->
    <!--      <div class="header_qrcode">-->
    <!--        <vue-qrcode :value="qrCodeValue" :margin="0" :width="qrCodeSize" type="image/png"-->
    <!--                    :color="{ dark: qrCodeDarkColor, light: qrCodeLightColor }">-->
    <!--        </vue-qrcode>-->
    <!--      </div>-->
    <!--      <div class="header_detail">-->
    <!--        <div class="header_bottom_box" v-for="item in detailData.qrCodeDetail">-->
    <!--          {{ item }}-->
    <!--        </div>-->
    <!--        <div v-if="detailData.qrCodeDetail.length === 0" class="header_bottom_box">-->
    <!--          其他信息详见包装-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->

    <div class="continua">
      <div class="continua_title">
        <img src="../images/icon-circle.svg">
        <div class="continua_title_text">产品信息</div>
      </div>
      <img class="imgStyle" :src="detailData.productVo.goodsImg">
    </div>
    <div class="continua">
      <div class="continua_title">
        <img src="../images/icon-circle.svg">
        <div class="continua_title_text">产品名称</div>
      </div>
      <div class="continua_details">{{ detailData.productVo.goodsName }}</div>
    </div>
    <div class="continua">
      <div class="continua_title">
        <img src="../images/icon-circle.svg">
        <div class="continua_title_text">规格</div>
      </div>
      <div class="continua_details">{{ detailData.productVo.goodsSpec }}</div>
    </div>
    <!--    <div class="continua">-->
    <!--      <div class="continua_title">-->
    <!--        <img src="../images/icon-circle.svg">-->
    <!--        <div class="continua_title_text">防伪码</div>-->
    <!--      </div>-->
    <!--      <div class="continua_details">{{ detailData.productVo.antiFakeCode }}</div>-->
    <!--    </div>-->
    <!--    <div class="continua">-->
    <!--      <div class="continua_title">-->
    <!--        <img src="../images/icon-circle.svg">-->
    <!--        <div class="continua_title_text">产地</div>-->
    <!--      </div>-->
    <!--      <div class="continua_details">{{ detailData.productVo.producingArea }}</div>-->
    <!--    </div>-->
    <div class="continua">
      <div class="continua_title">
        <img src="../images/icon-circle.svg">
        <div class="continua_title_text">生产厂家</div>
      </div>
      <div class="continua_details">{{ detailData.productVo.factoryName }}</div>
    </div>

    <div class="footer">
      <div class="footer_title">
        联系我们
      </div>

      <div>
        <div class="footer_content">
          <div>
            <img class="erweimaStyle" src="../images/erweima.jpg"/>
          </div>
          <div class="content_details">公众号二维码</div>
          <div class="content_details">扫码关注瑞可丽</div>

          <div class="phone_content">
            <div class="phone_details">
              <img src="../images/icon-dianhua.png"/>
              <div>133-8191-5724</div>
            </div>
          </div>
          <div class="box_details">隐私条例 | 条款及细则</div>
        </div>
      </div>

      <div class="foot_continua">
        ©瑞可丽.本网站旨在为爱美人士提供皮肤、皮肤衰老和皮肤衰老治疗相关的信息和教育。
        其中包括瑞可丽品牌产品信息。不构成医嘱。
        请咨询经过培训的医疗美容专业人士来获得更多可能适合您的方案信息。
      </div>


      <div class="footer_footer">
        <div class="footer_footer_content">
          <img src="../images/icon-gongshang.png"/>
          <div class="footer_box">中国工商</div>
          <div>沪ICP备2021026130号-1</div>
        </div>
        <div class="footer_footer_content">
          <img src="../images/icon-gongan.png"/>
          <div class="footer_box">沪公网安备</div>
          <div>31010702008027号</div>
        </div>
      </div>

      <div class="footer_end">
        ©Copyright Ruikeli. All Rights Reserved
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import VueQrcode from 'vue-qrcode'
import api from "../api/index.js";
import {remToPx, cutString} from '../utils/index.js'
import {useMainStore} from '../store/index.js';
import router from "../router/index.js";

const store = useMainStore();
const qrCodeDarkColor = '#000'
const qrCodeLightColor = '#FFF'
const qrCodeSize = ref(remToPx(17.5))
const qrCodeValue = ref('暂无数据')
const detailData = reactive({
  qrCodeDetail: [],
  productVo: {
    udicode: ''
  }
})
const loadData = async () => {
  const url = `/ruikeli/user/getProductDetail`
  if (!store.count) {
    router.push({path: `/`})
    return
  }
  const {data, err} = await api.get(url, {antiFakeCode: store.count})
  detailData.productVo = data.productVo
  qrCodeValue.value = data.productVo.udicode
  detailData.qrCodeDetail = cutString(data.productVo.udicode)
}

onMounted(() => {
  loadData()
})
</script>
<style lang="less" scoped>
.headerImg {
  width: 100%;
}

.header {
  width: 100%;
  height: 277px;
  box-sizing: border-box;
  padding: 10px 30px;

  .header_title {
    font-size: 26px;
    color: #1391B1;
    text-align: left;
    font-weight: 400;
  }

  .header_content {
    height: 200px;
    margin-top: 16px;
    display: flex;

    .header_qrcode {
      margin-right: 37.5px;
    }

    .header_detail {
      font-size: 22px;
      font-weight: 400;

      .header_bottom_box {
        margin-top: 6px;
      }

    }
  }
}

.continua {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 0;
  border-bottom: 1px solid #cccccc;

  .continua_title {
    display: flex;
    align-items: center;

    img {
      width: 20px;
      height: 20px;
    }

    .continua_title_text {
      font-size: 34px;
      color: #1B1D1E;
      font-weight: 600;
      margin-left: 16px;
    }
  }

  .imgStyle {
    width: 100%;
    margin-top: 16px;
  }

  .continua_details {
    font-size: 26px;
    color: #999999;
    text-align: left;
    font-weight: 400;
    margin-top: 14px;
    margin-left: 36px;
  }
}

.footer {
  .footer_title {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #1B1D1E;
    font-weight: 600;
    border-bottom: 1px solid #cccccc;
  }

  .footer_content {
    width: 100%;
    flex-wrap: wrap;

    div {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .erweimaStyle {
      width: 218px;
      height: 218px;
      margin: 22px 0;
    }

    .content_details {
      font-size: 27px;
      color: #666A6C;
      text-align: center;
      font-weight: 400;
    }

    .phone_content {
      width: 100%;
      .phone_details {
        padding-left: 20px;
        height: 76px;
        width: 330px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 28px 0 45px 0;

        border: 1px solid #2E3031;
        font-size: 35px;
        color: #666A6C;
        font-weight: 400;

        img {
          width: 42px;
          height: 42px;
        }
      }
    }

    .box_details {
      font-size: 24px;
      color: #666A6C;
      font-weight: 400;
    }

  }

  .foot_continua {
    width: 100%;
    font-size: 20px;
    color: #666A6C;
    font-weight: 400;
    border-bottom: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
    padding: 10px;
    letter-spacing: 0;
    margin-bottom: 20px;
  }

  .footer_footer {
    display: flex;
    justify-content: space-between;

    .footer_footer_content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      color: #666A6C;
      letter-spacing: 0;
      text-align: justify;
      font-weight: 400;

      img {
        height: 39px;
        width: 39px;
      }

      .footer_box {
        margin: 0 14px;
      }
    }
  }

  .footer_end {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #666A6C;
    text-align: justify;
    font-weight: 400;
  }
}
</style>